/*!
    create css in 2020-11-16  kexuemihe update in 12-9  @wang   page----精品课件
*/

$(function () {
    // 进入页面如有code参数就调用微信接口获取用户信息
    var userinfo = extendLocalStorage.get("userinfo");
    // 用户登录后，同步缓存用户信息
    let jumpPar = window.location.href;
    let wxCode = jumpPar.split("=")[1];
    if (wxCode) {
        console.log("微信登录");
        $.ajax({
            url: '' + testUrl + '/platform/user/wechat_login?code=' + wxCode,
            type: 'get',
            success: function (res) {
                if (res.data.userinfo) {
                    // localStorage.setItem("userinfo", JSON.stringify(res.data.userinfo));
                    // 12个小时的有效时间
                    extendLocalStorage.set("userinfo", res.data.userinfo, new Date().getTime() + 86400000);;
                    userinfo = res.data.userinfo;
                    $(".loginDialog").css("display", "none");
                    $(".logAfterHide").css("display", "none");
                    $(".Hright .loginAfter").removeClass("dn").append('<img draggable="false" src=' + userinfo.avatar + ' title="' + userinfo.nickname + '">');
                    getDefaultCourse();
                }
            }
        })
    }
    if (!userinfo) {
        $(".logAfterHide").css("display", "block");
        $(".Hright .loginAfter").addClass("dn");
        $(".loginDialog").css("display", "block");
    } else {
        $(".loginDialog").css("display", "none");
        // 当用户进来默认展示的课程类型  如果有登录信息才执行此函数
        getDefaultCourse();
    }
    // 获取课程列表
    function getDefaultCourse() {
        let data = {
            token: userinfo.token
        }
        /** 获取当前用户拥有几个机构，超过等于2个则默认加载科学芈盒的课程 */
        $.ajax({
            type: "get",
            url: `${testUrl}/platform/organization/my`,
            data: data,
            success: function (res) {
                let org_id = 4;
                if (res.code == 0 || res.data.length == 0) {
                    alert("获取失败");
                    return false;
                }
                if (res.data.length >= 2) {
                    org_id = 3;
                    // 当用户进来默认展示的课程类型  如果有登录信息才执行此函数
                    $.ajax({ // 4是科学小伙伴  3是科学芈盒
                        url: `${testUrl}/platform/course/index?org_id=${org_id}&token=${userinfo.token}`, //没有加入过机构的用户显示科学小伙伴下的课程    当拥有2个以上机构的用户默认显示科学芈盒的课程
                        type: 'get',
                        success: function (res) {
                            $.each(res.data.info, function (index, item) {
                                $(fragment).append('<li _classHourId=' + item.id + '><a href="javascript:;"><img draggable="false" src="' + item.images[0] + '"><div><p>' + item.name + '</p><em class="iconfont iconshenglvehao"></em></div></a></li>');
                            });
                            $("#courseinfoStore").append(fragment);
                            clickCourseList();
                        }
                    })
                } else { //就是获取科学小伙伴的
                    // 当用户进来默认展示的课程类型  如果有登录信息才执行此函数
                    $.ajax({ // 4是科学小伙伴  3是科学芈盒
                        url: `${testUrl}/platform/hour/index?id=50&token=${userinfo.token}&page=1&row=100`, //没有加入过机构的用户显示科学小伙伴下的课程    当拥有2个以上机构的用户默认显示科学芈盒的课程
                        type: 'get',
                        success: function (res) {
                            let classHourInfos = res.data.info;
                            $.each(classHourInfos, function (index, item) {
                                $("#courseinfoStore").append(
                                    '<li _classHourConId=' + item.id + ' ><a href="javascript:;"><img draggable="false" src="' + item.cover + '"><div><p>' + item.name + '</p><em class="iconfont iconshenglvehao"></em></div></a></li>'
                                );
                            });
                            classListFn();
                        }
                    })
                }
            }
        });
    }
    // 当点击一个课程列表时
    function clickCourseList() {
        $("#courseinfoStore>li").unbind("click").click(async function (e) {
            if ($(e.target)[0] == $(this).find("em")[0]) {
                return false;
            }
            let data = {
                token: userinfo.token,
                id: $(this).attr("_classHourId"),
                page:1,
                row:100
            };
            $("#courseinfoStore").empty(); //点击课程进入课时列表，先把课程展示删除
            let res = await sendAjax("get", '' + testUrl + '/platform/hour/index', data);
            if (res.code == 0 || res.data.info.length == 0) {
                getDefaultCourse();
                alert("此课程无数据");
                return false;
            }
            // let classHourInfos = res.data.info.slice(0, 2);
            let classHourInfos = res.data.info;
            $.each(classHourInfos, function (index, item) {
                $("#courseinfoStore").append(
                    '<li _classHourConId=' + item.id + ' ><a href="javascript:;"><img draggable="false" src="' + item.cover + '"><div><p>' + item.name + '</p><em class="iconfont iconshenglvehao"></em></div></a></li>'
                );
            });
            classListFn();
        });
    }
    // 预览pptx  swiper初始化
    var swiper = new Swiper('.swiper-container-x', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        on: {
            slideChangeTransitionEnd: function () {
                $.each(videoArr, function (index, item) {
                    item.pause();
                })
            },
        },
        // effect: 'cube',
        mousewheel: true, //滚轮轮播
        // /过渡到slide一开始就加载，设置为true
        keyboard: true, //开启键盘控制翻页
        clickable: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
    });

    // 创建虚拟dom对象
    var fragment = document.createDocumentFragment();
    // 用户进到首页先默认一个加载课时列表
    function classListFn() { //课时列表某一项，点出预览窗口出现
        $("#courseinfoStore>li").unbind("click").click(async function (e) {
            if ($(e.target)[0] == $(this).find("em")[0]) {
                return false;
            }
            //鼠标移出隐藏按钮，移入显示按钮
            $("#previewErr").hide();
            $("#loading").show();
            if (!userinfo) {
                $(".loginDialog").css("display", "block");
                return;
            }
            $(".previewPPTX").css("display", "block");
            // console.log($(this).attr("_classhourconid"));
            let data = {
                token: userinfo.token,
                id: $(this).attr("_classHourConId")
            };
            let res = await sendAjax("get", '' + testUrl + '/platform/hour/detail', data);
            if (!res.data) {
                $("#loading").hide();
                $("#previewErr").show();
                return false
            } else {
                if (res.data.plan.length !== 0) {
                    $("#previewErr").hide();
                } else {
                    $("#loading").hide();
                    $("#previewErr").show();
                }
            }
            $(".previewPPTX h3").text(res.data.name); //改变预览头部的标题
            let getArr = res.data.plan;
            is_screen = [];
            // console.log(getArr)
            $.each(getArr, function (index, item) {
                if (item.type == 1) { // 视频加图片
                    $(".swiper-wrapper").append(`<div class="swiper-slide" is_screen=${item.is_screen} is_type=${item.type}><img draggable="false" src="${item.cover}"><video controls src="${item.context}"></video></div>`);
                } else if (item.type == 3) { //音频加图片
                    $(".swiper-wrapper").append(
                        `<div class="swiper-slide" is_screen=${item.is_screen}><img draggable="false" src="${item.cover}"><audio controls src="${item.context}"></audio></div>`
                    );
                } else if (item.type == 4) { //多张图片
                    $.each(item.context, function (index, it) {
                        $(".swiper-wrapper").append(
                            `<div class="swiper-slide" is_screen=${item.is_screen}><img draggable="false" src="${it}"></div>`
                        );
                    });
                } else { //为图片
                    $(".swiper-wrapper").append(`<div class="swiper-slide" is_screen=${item.is_screen}><img draggable="false" src="${item.context}"></div>`)
                }
            });
            $("#loading").hide();
            // $(".swiper-wrapper").append(fragment);
            videoArr = $(".swiper-container video,.swiper-container audio");
            $(".swiper-slide[is_type]").unbind("click").click(function () {
                $(this).find("img").css("display", "none");
                $(this).find("video").css("display", "block");
            })
        });
    }

    // 点击查看课件，进入全屏
    $("#lookCourse").unbind("click").click(function (e) {
        var el = document.documentElement; //<html></html>元素
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; //全屏得方法sessionStorage
        rfs.call(el);
        $(".swiper-button-prev").css("display", "none");
        $(".swiper-button-next").css("display", "none");
        $(".screenFullNone").css("display", "none");
        $(".content").css("visibility", "hidden");
        let allSwiper = $(".swiper-wrapper .swiper-slide");
        $.each(allSwiper, function (index, item) {
            if ($(this).attr("is_screen") == 0) {
                $(this).css("display", "none");
            }
        })
        videoArr = $(".swiper-container video,.swiper-container audio");
        $(".centerBox").css({
            width: "100%",
        })
        $(".previewPPTX .PPTXCon").css("padding", "0");
    })

    // 监听火狐全屏事件和chrome
    function no_fullScreen() {
        $(".previewPPTX").css("display", "none");
        $(".screenFullNone").css("display", "block");
        $(".content").css("visibility", "visible");
        $(".loginDialog").css("display", "none");
        $(".connectErr").css("display", "none");
        $(".previewPPTX").css("display", "none");
        $(".previewPPTX .swiper-container").empty(); //点击课程进入课时列表，先把课程展示删除
        $(".previewPPTX .swiper-container").append('<div class="swiper-wrapper"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div>');
        $(".centerBox").css({
            width: "61%",
        })
        $(".previewPPTX .PPTXCon").css("padding", "10px");
        var swiper = new Swiper('.swiper-container-x', {
            keyboard: true, //开启键盘控制翻页
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {
                slideChangeTransitionEnd: function () {
                    // console.log(videoArr)

                    $.each(videoArr, function (index, item) {
                        item.pause();
                    })
                },
            },
            // effect: 'cube',
            mousewheel: true, //滚轮轮播
            clickable: true,
            observer: true, //修改swiper自己或子元素时，自动初始化swiper

        });
    }
    // 退出全屏时所做操作，因为这个视频全屏播放然后取消也会触发全屏的相关视频，所以要判断当触发源是video，则不进行退出全屏的操作。因为e.target返回的是标签信息无法进行判断，所以这里使用的e.path  （不太严谨）
    document.addEventListener("webkitfullscreenchange", function (e) {
        if (!e.currentTarget.webkitIsFullScreen && e.path.length < 6) {
            no_fullScreen()
        }
    });
    document.addEventListener("mozfullscreenchange", function (e) {
        if (!e.currentTarget.mozFullScreen && e.path.length < 6) {
            no_fullScreen();
        }
    });

    // 预览窗口关闭
    $(".previewPPTX .close img").unbind("click").click(function () {
        $(".previewPPTX").css("display", "none");
        $(".previewPPTX .swiper-container").empty(); //点击课程进入课时列表，先把课程展示删除
        $(".previewPPTX .swiper-container").append('<div class="swiper-wrapper"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div>');
        var swiper = new Swiper('.swiper-container-x', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {
                slideChangeTransitionEnd: function () {
                    $.each(videoArr, function (index, item) {
                        item.pause();
                    })
                },
            },
            // effect: 'cube',
            mousewheel: true, //滚轮轮播
            // /过渡到slide一开始就加载，设置为true
            keyboard: true, //开启键盘控制翻页
            clickable: true,
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
        });

    })
    let videoArr = [];
    // 侧边栏点击事件  互动课件   (只加载科学芈盒机构下的课件)
    $("#interactCourse").unbind("click").click(async function (e) {
        e.preventDefault();
        // let curOrgan = extendLocalStorage.get("curOrgan");
        $(this).addClass("active").siblings().removeClass("active");
        // if (!curOrgan) {
        //     alert("请先选择所属机构");
        //     $("#searchErr").hide();
        //     $("#courseinfoStore").empty();
        //     // 证明此用户再此机构下，没有创建过互动视频所以不加载
        //     $("#searchErr").show();
        //     return false;
        // }
        let data = {
            token: userinfo.token,
            org_id: 3,
            status: 2
        }
        let res = await sendAjax("get", `${testUrl}/platform/resource/index`, data);
        $("#courseinfoStore").empty();
        $("#searchErr").hide();
        if (res.data.length == 0) {
            // 证明此用户再此机构下，没有创建过互动视频所以不加载
            $("#searchErr").show();
            return false;
        }
        $.each(res.data, function (i, item) {
            $("#courseinfoStore").append(
                '<li><a href="./playVideo.html?id=' + item.id + '&isbei=0" target="_blank"><img draggable="false" src="' + item.cover + '"><div><p>' + item.title + '</p><em class="iconfont iconshenglvehao moreOpt"></em></div></a></li>'
            );
        });
        let height = parseInt($("#courseinfoStore li").width() / 1.95);
        $("#courseinfoStore li img").attr({
            height: height + "px"
        })
    });
    // 侧边栏 趣味课件
    $("#PPTCourse").unbind("click").click(function (e) {
        e.preventDefault();
        $(this).addClass("active").siblings().removeClass("active");
        $("#courseinfoStore").empty();
        $("#searchErr").hide();
        getDefaultCourse();
    });
    // 右侧sousuo图片 
    $("#sousuo").mouseenter(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).slideUp().siblings().slideDown(200);
        $(".search").mouseleave(function (e) {
            if ($("#searchCouName").val()) {
                return false;
            }
            e.preventDefault();
            e.stopPropagation();
            $("#sousuo").show(200).siblings().slideUp(200);;
        })
    });
    // 搜索课程
    let searchInp = $("#searchCouName");
    searchInp.keyup(debounce(async function (e) {
        if (e.keyCode != 13) { //只有点击回车时会继续往下执行
            return false
        };
        $("#searchErr").hide();
        $("#courseinfoStore").empty()
        let curOrgan = extendLocalStorage.get("curOrgan");
        if (!curOrgan) {
            return false;
        }
        let sendData = {
            token: userinfo.token,
            // org_id: curOrgan.org_id,
            org_id: 3, // 默认搜索的是科学芈盒的课程
            name: searchInp.val()
        };
        let res = await sendAjax("get", `${testUrl}/platform/course/search`, sendData);
        // console.log(res);
        if (res.data.info.length == 0) {
            $("#searchErr").show(200);
            return false;
        }
        let eleArr = `<ul id="courseinfoStore">`
        $.each(res.data.info, function (i, item) {
            eleArr += `<li _classHourId='${item.id}'><a href="javascript:;"><img draggable="false" src="${item.images[0]}"><div><p>${item.name}</p><em class="iconfont iconshenglvehao"></em></div></a></li>`
        });
        eleArr += "</ul>";
        $("#courseinfoStore").replaceWith(eleArr);
        $("#classSelA span").text("请选择");
        clickCourseList()
    }));
    // 防止多次触发事件的函数
    function debounce(fn) {
        var timer;
        return function () {
            var that = this; //防止定时器中的this变成window对象了
            var args = arguments; //获取函数参数
            if (timer) {
                //当定时器里的函数还未运行，会走里面，清除即将触发的定时器
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                timer = null;
                fn.apply(that, args); //用apply调用函数	
            }, 500);
        }
    }
    var interCourseId = "";
    // 更多操作
    $("#courseinfoStore").on('click', ".moreOpt", function (e) {
        e.preventDefault();
        interCourseId = $(this).parents("a").attr("href");
        interCourseId = interCourseId.slice(interCourseId.indexOf("=") + 1, interCourseId.lastIndexOf("&"))
        let $opt = $("#opt");
        $opt.css({
            left: e.clientX - 50,
            top: e.clientY + 10,
        }).slideToggle(300);
        $opt.mouseleave(function () {
            $opt.slideUp();
        });
    });
    // 更多操作---演示课件
    $("#interTeachShow").click(function (e) {
        e.preventDefault();
        window.open(`playVideo.html?id=${interCourseId}&isbei=1`)
    });




    /** 下拉列表功能  */
    // var selLi = $("#courseSelBox li");
    // 2个课程下拉框点击发生变化
    // function undSel(selLi) {
    //     selLi.unbind("click").click(async function () {
    //         $("#courseinfoStore").empty();
    //         $("#PPTCourse").addClass("active").siblings().removeClass("active");
    //         // console.log(selLi);
    //         var index = $(this).index(); //点击的li的下标
    //         // 对于性能好，本来要先全部去这个类名，然后再给点击的加
    //         // 这样写就相当少删除一个类名
    //         selLi.eq(index).addClass("selChecked").siblings().removeClass("selChecked");
    //         $(this).parent().siblings().children().text($(this).find("span").text());
    //         // 点击某一个li对应得发送请求获取其下得课程信息
    //         let data = {
    //             token: userinfo.token,
    //             org_id: $(this).attr("_coursesId"), //机构id 暂时无用
    //         }
    //         let res = await sendAjax("get", '' + testUrl + '/platform/course/index', data);
    //         if (!res.data) {
    //             $("#searchErr").show();
    //             return false;
    //         }
    //         let courseinfos = res.data.info
    //         if (courseinfos.length !== 0) {
    //             $("#searchErr").css("display", "none");
    //             $(".courses").css("display", "block");
    //             $("#courseinfoStore").empty();
    //             $.each(courseinfos, function (index, item) {
    //                 $("#courseinfoStore").append(
    //                     '<li _classHourId=' + item.id + '><a href="javascript:;"><img draggable="false" src="' + item.images[0] + '"><div><p>' + item.name + '</p><em class="iconfont iconshenglvehao" ></em></div></a></li>'

    //                 );
    //             });
    //             $("#courseinfoStore>li").unbind("click").click(async function (e) {
    //                 if ($(e.target)[0] == $(this).find("em")[0]) {
    //                     return false;
    //                 }
    //                 // console.log($(this).attr("_classHourId"));
    //                 let data = {
    //                     token: userinfo.token,
    //                     id: $(this).attr("_classHourId")
    //                 };
    //                 $("#courseinfoStore").empty(); //点击课程进入课时列表，先把课程展示删除
    //                 let res = await sendAjax("get", '' + testUrl + '/platform/hour/index', data);
    //                 console.log(res);
    //                 // let classHourInfos = res.data.info.slice(0, 2);
    //                 let classHourInfos = res.data.info;
    //                 $.each(classHourInfos, function (index, item) {
    //                     $("#courseinfoStore").append(
    //                         '<li _classHourConId=' + item.id + ' ><a href="javascript:;"><img draggable="false" src="' + item.cover + '"><div><p>' + item.name + '</p><em class="iconfont iconshenglvehao "></em></div></a></li>'

    //                     );
    //                 });
    //                 classListFn();
    //             })
    //         } else {
    //             $("#searchErr").css("display", "block");
    //             $(".courses").css("display", "none");
    //         }

    //     });
    // }
    // $(".sel .undSel").unbind("click").click(function () {
    // $(this).find("ul").toggle(0);
    // })
    // var selLiTwo = $(".sel .ageSel .undSel li");
    // undSel(selLiTwo);
    // 请求课程下拉框并且渲染进页面
    //  let classSelLiInfo = [];
    //  $("#classSelA").unbind("click").click(function () {
    //      let userinfo = extendLocalStorage.get("userinfo");;
    //      if (classSelLiInfo.length !== 0) { //当不为0的时候证明列表已经获取，就不要再次获取了
    //          return
    //      }
    //      if (userinfo) {
    //          let data = {
    //              token: userinfo.token
    //          }
    //          sendAjax("get", '' + testUrl + '/platform/course/type', data).then(function (res) {
    //              // console.log(res)
    //              classSelLiInfo = res.data.types;
    //              // res.data.types.splice(2, 1); // 把下标为2的暑期班课程截取
    //              let sumLi = res.data.types;
    //              $.each(sumLi, function (index, item) {
    //                  if (item.id == 9) {
    //                      $("#courseSelBox").prepend('<li _coursesId=' + item.id + ' class="selChecked"><a href="javascript:;"><span>' + item.name + '</span></a></li>');
    //                  } else { //因为这2个没有  需求让放到后面
    //                      $("#courseSelBox").append('<li _coursesId=' + item.id + '><a href="javascript:;"><span>' + item.name + '</span></a></li>');
    //                  }
    //              });
    //              // selLi = $(".sel .classSel .undSel li");
    //              // undSel(selLi)
    //          });
    //      } else {
    //          $(".loginDialog").css("display", "block");
    //      }
    //  })

})